import React, { PureComponent } from 'react';
import { Card } from 'antd';
import styles from './Components.less'
class Index extends PureComponent<any, any> {
    render() {
        const { title, frequency, num, subTitle ,color} = this.props;
        const style = () =>{
            if(color==='blue')return 'linear-gradient(to bottom right,#1487d7, #62beff)';
            if(color==='orange')return ' linear-gradient(to bottom right, #fb9167, #fbc16d)';
            if(color==='purple')return ' linear-gradient(to bottom right, #aa81eb, #c6a9ec)';
        }
        return (
            <Card bordered={false} style={{backgroundImage:style() ,height:140}}>
                <div className={styles['card-title']}>
                    {title}
                </div>
                <div className={styles['card-info']}>
                    <p className={styles['frequency']}><span>{frequency}</span><span>次</span></p>
                    <div className={styles['precent']}>
                        <p>{num}</p>
                        <p>{subTitle}</p>
                    </div>
                </div>
            </Card>
        );
    }
}

export default Index;
